
<script lang="ts" setup>
    import MobileNav from '@/components/mobile-ai/components/mobile-nav.vue'
    import ReportAide from '@/api/currentdemo/ReportAide';
    import { Mobile_TOKEN_KEY} from "@/enums/CacheEnum";

    const Token = <string>localStorage.getItem(Mobile_TOKEN_KEY);
    const input =ref('');
    const cardShow = ref(false);
    const aiAnswer = ref(false);
    const infoTableData = ref([]);
    const singleData = ref([]);
    const isShowTable = ref(0);
    // 获取列的最小宽度
    const getColumnMinWidth = (key:any) => {
        switch (key) {
            case '姓名':
                return 80;
            case '性别':
                return 60;
            case '电话':
                return 120;
            case '学历':
                return 100;
            case '入职时间':
                return 100;
        }
    };

    function onClickOut(){
        if (!input.value.trim()) {
            ElMessage.error('请填写查询要求');
            return;
        };
        cardShow.value = true;
        aiAnswer.value = false;
        ReportAide.genAIreport(Token, input.value).then(res => {
            input.value = ''
            aiAnswer.value = true;
            infoTableData.value = res.data;
            if (res.data.length > 1) {
                isShowTable.value = 1;
            }else if(res.data.length == 1){
                isShowTable.value = 2;
                const filteredData = res.data[0];
                delete filteredData.invalid;
                delete filteredData.deleted;
                singleData.value = Object.keys(filteredData).map(key => ({
                    label: key,
                    value: filteredData[key]
                }));
            }else {
                isShowTable.value = 0;
            }
        });
    }
</script>
<!--智能报表页面 -->
<template>
     <section class="center pb-16">
        <MobileNav :navname="'智能报表'" :navshow="true"  />
        <div class="reqort-list pt-11">
            <div class="ai-answers w-full" v-show="cardShow">
                <div class="flex flex-col">
                    <div class="flex self-start items-center p-2.5">
                        <div class="w-11 mr-2.5">
                            <img src="/src/assets/images/AI_avatar.png" alt="" class="w-11 rounded">
                        </div>
                        <div class="answer pl-0.5 relative rounded-lg  text-base">
                            <div class="font-semibold">AI智能助手</div>
                            <!-- <div class="answer-content flex" >
                                <span v-if="!aiAnswer">
                                    <img src="../../../assets/images/avatar/long.gif" alt="" class="w-5 h-5 mr-1">
                                    AI正在生成报表......
                                </span>
                                <span v-else-if="isShowTable==0" >对不起，找不到您要的数据！</span>
                                <span v-else >报表结果已经生成：</span>height: 73vh;
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full px-2.5">
                <el-card v-if="!aiAnswer&&cardShow">
                    <div class="flex">
                        <img src="../../../assets/images/avatar/long.gif" alt="" class="w-5 h-5 mr-1">
                        AI正在生成报表......
                    </div>
                </el-card>
                <el-card v-if="aiAnswer" class="w-full">
                    <el-table 
                        :data="infoTableData"
                        v-if="isShowTable == 1" 
                        style="width: 100%;" 
                        border
                        empty-text="没有匹配的内容"
                        :header-cell-style="{  whiteSpace: 'nowrap' }"
                        >
                            <el-table-column 
                            v-for="(value, key) in infoTableData[0]"
                                :key="key" :prop="key" :label="key"
                            show-overflow-tooltip 
                            align="center" header-align="center" 
                            :min-width="getColumnMinWidth(key)"
                            >
                            </el-table-column>
                    </el-table>
                    <el-table :data="singleData" v-else-if="isShowTable == 2" style="width: 100%; height: 100%;" border
                        :show-header="false" class="oneDataTab">
                        <el-table-column prop="label" label="信息" align="center" width="140"
                            :class-name="'info-column'"></el-table-column>
                        <el-table-column prop="value" label="数据" align="center"></el-table-column>
                    </el-table>
                    <div v-else>对不起，找不到您要的数据！</div>
                </el-card>
            </div>
        </div>
        <div class="footer w-full  flex items-center justify-start px-2">
            <el-input v-model="input" ref="inputRef" @keydown.enter="onClickOut"  placeholder="请输入查询要求" />
            <el-button type="primary" class="ml-2" @click="onClickOut">发送</el-button>
        </div>
    </section>
</template>
  
<style scoped >
    .footer{
        position: fixed;
        bottom: 0;
        height: 3.5rem;
        background-color: #fff;
        z-index: 9999999;
    }
    .center{
        width: 100%;
        height: 100%;
        flex: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: scroll;
        scrollbar-width: none;
        overflow-y: scroll !important;
    }
    .reqort-list{
        width: 100%;
        height: 100%;
        flex: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: scroll;
        scrollbar-width: none;
        overflow-y: scroll !important;
        /* height: 85vh; */
    }
    .ai-answers{
        /*之前默认是 9vh */
        height: 8vh;
    }
    .center /deep/ .is-leaf {
        background-color: #F5F7FA;
        color: #909399;
        font-weight: bold;
    }
    .center /deep/ .el-card__body{
        padding: .8rem;
    }
    .ai-triangle {
        width: 0;
        height: 0;
        border-left: 10px solid rgba(0, 0, 0, 0);
        border-right: 10px solid rgba(0, 0, 0, 0);
        border-top: 10px solid #FFFFFF;
        top: 8px;
        left: -10px;
    }
    .answer{
        max-width: 85%;
        padding-top: 0;
        color: #606266;
    }
    .answer-content{
        background: #FFFFFF;
        /* font-size: 2px; */
        padding: 10px 15px;
        box-shadow: 0 0 20rpx rgba(153,153,153,.2);
        border-top-left-radius: 2px;
        border-top-right-radius: 15px;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        word-break: break-all;
    }

    .ai-answer {
        background-color:#FFFFFF;
        color: #1A2029;
    }
    :deep(.el-textarea__inner) {
        border: none;
        box-shadow: none;
        resize: none;
    }
</style>